<template>
  <!-- <dv-border-box-10 title="item7" class="item item-7"></dv-border-box-10> -->
  <div class="item item-7">
    <div class="subitem sub1">
      <div class="left">
        <img src="./imgs/cpkc.png" alt="">
      </div>
      <div class="right">
        <div class='title'>成品库存</div>

        <!-- <div class='content' style='color: #03D9EB'>{{ dataRef?.finishedInventory }} T</div> -->
      </div>
      <div class="content" :id="domIds.one"></div>
    </div>
    <div class="subitem sub2">
      <div class="left">
        <img src="./imgs/ylkc.png" alt="">
      </div>
      <div class="right">
        <div class='title'>原材库存</div>

        <!-- <div class='content' style="color: #F59A23">{{ dataRef?.materialInventory }} T</div> -->
      </div>
      <div class="content" :id="domIds.two"></div>
    </div>
    <div class="subitem sub3">
      <div class="left">
        <img src="./imgs/kchz.png" alt="">
      </div>
      <div class="right">
        <div class='title'>库存汇总</div>

        <!-- <div class='content' style='color: #70B603'>{{ dataRef?.total }} T</div> -->
      </div>
      <div class="content" :id="domIds.three"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, defineProps, reactive, watch, onUnmounted } from 'vue';
import * as formatLocalData from '../formatLocalData';
import * as echarts from 'echarts';
import { chartResize } from '@/views/dataBoard/compNew/ut';

const props = defineProps<{
  isComp: boolean
}>();
const rate = ref(2000);
const getRandomId = () => {
  return `{Date.now()}_${Math.ceil(Math.random() * 10000)}`;
}
const domIds = reactive({
  one: getRandomId(),
  two: getRandomId(),
  three: getRandomId()
})
const chartInstance: any = {
  one: null,
  two: null,
  three: null
};
let data: any = [];
let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value = 200;
let data2: any = [];
let data3: any = [];
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomData() {
  now = new Date(+now + oneDay);
  value = value + Math.random() * 21 - 10;
  return {
    name: now.toString(),
    value: [
      [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
      Math.round(value)
    ]
  };
}
for (var i = 0; i < 50; i++) {
  data.push(randomData());
}
const setOtherData = () => {
  data2 = data.map((item) => {
    return {
      name: item.name,
      value: [
        item.value[0],
        item.value[1] + Math.random() * 41 - 30
      ]
    }
  });
  data3 = data.map((item, index) => {
    return item;
    // return {
    //   name: item.name,
    //   value: [
    //     item.value[0],
    //     item.value[1] + data2[index].value[1]
    //   ]
    // }
  });
}
setOtherData();
const colors = ['#03D9EB', '#F59A23', '#70B603']
let timmer: any = null;
const setChart = (id, key, color) => {
  const myChart = echarts.init(document.getElementById(id) as any);
  chartInstance[key] = myChart;
  let _data = data;
  let max = 350;
  if (key === 'two') {
    _data = data2;
    max = 500
  }
  if (key === 'three') {
    _data = data3;
    max = 'datamax';
  }
  const option = {
    grid: {
      left: 10,
      top: 20,
      bottom: 10,
      right: 10
    },
    xAxis: {
      type: 'time',
      axisLine: {
        color: 'red'
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      max: max,
      min: 0,
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    series: [
      {
        type: 'line',
        showSymbol: false,
        smooth: true,
        data: _data,
        itemStyle: {
          color: color
        }
      }
    ]
  };
  myChart.setOption(option);
}

const updateChartData = (chart) => {
  for (var i = 0; i < 1; i++) {
    data.shift();
    data.push(randomData());
  }
  setOtherData();
  let _data = data;
  if (chart === chartInstance.two) {
    _data = data2;
  }
  if (chart === chartInstance.three) {
    _data = data3;
  }
  chart.setOption({
    series: [{
      data: _data
    }]
  });
}
const run = () => {
  timmer = setInterval(() => {
    updateChartData(chartInstance?.one);
    updateChartData(chartInstance?.two);
    updateChartData(chartInstance?.three);
  }, rate.value)
}
const init = () => {
  setChart(domIds.one, 'one', colors[0]);
  setChart(domIds.two, 'two', colors[1]);
  setChart(domIds.three, 'three', colors[2]);
  chartResize([chartInstance.one, chartInstance.two, chartInstance?.three]);
  run();
}
const getRate = async () => {
  const rates = await formatLocalData.getRate();
  rate.value = rates['inventory'];
  init();
}
onMounted(() => {
  getRate();
});
onUnmounted(() => {
  clearInterval(timmer);
})

</script>

<style lang="scss" scoped>
.item-7 {
  display: flex;
  gap: 10px;
  height: 100%;

  .sub1 {
    // background-image: url("./imgs/blue.svg");
    // background-repeat: no-repeat;
    // background-position: top center;
    background: linear-gradient(180deg, rgba(4, 37, 90, 1) 0%, rgba(4, 37, 90, 1) 0%, rgba(16, 35, 87, 1) 68%, rgba(2, 61, 101, 1) 100%, rgba(2, 61, 101, 1) 100%);
  }

  .sub2 {
    // background-image: url("./imgs/yellow.svg");
    // background-repeat: no-repeat;
    // background-position: top center;
    background: linear-gradient(180deg, rgba(4, 37, 90, 1) 0%, rgba(4, 37, 90, 1) 0%, rgba(36, 38, 87, 1) 68%, rgba(59, 51, 100, 1) 100%, rgba(59, 51, 100, 1) 100%);
  }

  .sub3 {
    // background-image: url("./imgs/green.svg");
    // background-repeat: no-repeat;
    // background-position: top center;
    background: linear-gradient(180deg, rgba(4, 37, 90, 1) 0%, rgba(4, 37, 90, 1) 0%, rgba(36, 38, 87, 1) 68%, rgba(59, 51, 100, 1) 100%, rgba(59, 51, 100, 1) 100%);
  }

  .subitem {
    display: flex;
    flex-basis: 33.33%;
    gap: 10px;
    padding: 0.5vh 1vh;
    height: 100%;
    position: relative;


    .left {
      flex-shrink: 0;

      img {
        width: 3vh;
        height: 3vh;
      }
    }

    .right {
      color: #FFF;
      flex: 1;
      padding-top: .5vh;
      height: 100%;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 1.8vh;
        line-height: 2vh;
        height: 2vh;
      }


    }

    .content {
      margin-top: 1vh;
      // flex: 1;
      // font-size: 3vh;
      // text-align: center;
      overflow: hidden;
      position: absolute;
      left: 4vh;
      top: 3vh;
      bottom: 1vh;
      right: 1vh;

    }
  }

  @media screen and (max-width: 800px) {
    display: block;
    padding-top: 10x;

    .subitem {
      margin-top: 10px;
      height: 10vh;
    }
  }
}
</style>
